import React from 'react'

const Help: React.FC = () => {
  const faqs = [
    {
      question: 'How do I subscribe to an AI companion?',
      answer: 'To subscribe to an AI companion, simply click on the "Subscribe" button on their profile page. You will be prompted to choose a subscription plan and complete the payment process.',
    },
    {
      question: 'How often will I receive videos?',
      answer: 'You will receive personalized videos from your subscribed AI companions daily. The exact time may vary depending on the companion and your timezone.',
    },
    {
      question: 'Can I cancel my subscription?',
      answer: 'Yes, you can cancel your subscription at any time. Go to your profile settings, select "Subscriptions", and click on "Cancel Subscription". Your access will continue until the end of your current billing period.',
    },
    {
      question: 'How do I contact support?',
      answer: 'You can contact our support team by emailing support@knowyou.com or by using the contact form in the Help & Support section. We typically respond within 24 hours.',
    },
  ]

  return (
    <div className="min-h-screen bg-app-dark text-white">
      <div className="p-4">
        <h1 className="text-2xl font-bold mb-6">Help & Support</h1>

        {/* Search Bar */}
        <div className="mb-6">
          <div className="relative">
            <input
              type="text"
              placeholder="Search for help..."
              className="w-full bg-card-dark rounded-xl px-4 py-3 pl-10 text-white"
            />
            <i className="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
          </div>
        </div>

        {/* Quick Links */}
        <div className="mb-6">
          <h2 className="text-lg font-bold mb-3">Quick Links</h2>
          <div className="grid grid-cols-2 gap-3">
            <button className="bg-card-dark rounded-xl p-4 text-left">
              <div className="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center mb-2">
                <i className="fas fa-question-circle text-primary"></i>
              </div>
              <span>FAQ</span>
            </button>
            <button className="bg-card-dark rounded-xl p-4 text-left">
              <div className="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center mb-2">
                <i className="fas fa-envelope text-primary"></i>
              </div>
              <span>Contact Us</span>
            </button>
            <button className="bg-card-dark rounded-xl p-4 text-left">
              <div className="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center mb-2">
                <i className="fas fa-file-alt text-primary"></i>
              </div>
              <span>Terms</span>
            </button>
            <button className="bg-card-dark rounded-xl p-4 text-left">
              <div className="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center mb-2">
                <i className="fas fa-shield-alt text-primary"></i>
              </div>
              <span>Privacy</span>
            </button>
          </div>
        </div>

        {/* FAQ Section */}
        <div>
          <h2 className="text-lg font-bold mb-3">Frequently Asked Questions</h2>
          <div className="space-y-4">
            {faqs.map((faq, index) => (
              <div key={index} className="bg-card-dark rounded-xl p-4">
                <h3 className="font-bold mb-2">{faq.question}</h3>
                <p className="text-gray-400">{faq.answer}</p>
              </div>
            ))}
          </div>
        </div>

        {/* Contact Support */}
        <div className="mt-6">
          <button className="w-full bg-gradient-to-r from-primary to-primary-gradient-end text-white py-3 rounded-xl font-bold">
            Contact Support
          </button>
        </div>
      </div>
    </div>
  )
}

export default Help 